<template>

	<view class="page">
		<!-- <up-navbar title="百霸智育" @rightClick="{}" :autoBack="true" bgColor = "#f1f1f1" placeholder></up-navbar> -->
		<page-container :overlay="false" :show="isShowPage" @beforeleave="beforeleave"
			custom-style="height:100vh;overflow:scroll">
			<view class="box">
				<view class="content paddingTop-20 paddingLeft-24 paddingRight-24 box-sizing">
					<view class="flex width-full  fontSize-28 relative u-flex-between">
						<view class="book_name color-333 fontSize-28">
							{{headInfo.book_name}}
						</view>
						<view class="color-333 fontSize-28">
							生词：{{headInfo.unknowWord}}
						</view>
						<view class="flex items-center">
							<view class="" style="color: #51D580;">
								{{headInfo.finishWord}}
							</view>
							<view class="">
								/{{headInfo.totalWord}}
							</view>
						</view>
						<up-icon @click="iconClick" name="setting" color="#333" size="18"></up-icon>
					</view>
					<view class="flex width-full marginTop-20 marginBottom-40">
						<up-line-progress activeColor="#51D580" :showText="false"
							:percentage="Math.ceil((parseInt(headInfo.finishWord)/parseInt(headInfo.totalWord))*100)"
							height="8"></up-line-progress>
					</view>
					<view class="wordsContent marginTop-20 marginBottom-20 flex column ">
						<view @click="activeWords(item,index)" v-if='!isStatus'
							class="relative  marginBottom-10 paddingBottom-10 paddingTop-10 box-sizing paddingLeft-30 paddingRight-30 borderRadius-10 width-full flex  space-between items-center box_list"
							v-for="(item,index) in list" :key="index"
							:class="activeData[index]?type == 1?'boxBorder':'boxBorder1':type==1?'bgColor':'bgColor2'">
							<view class=" width-full flex column flex-center">
								<view class="fontSize-30 weight-700">
									{{item.wordHead}}
								</view>
								<view class="fontSize-24 color-AAA"
									v-if="userInfo&&userInfo.memberset&&userInfo.memberset.yingbiao == 1">
									{{item.phone}}
								</view>
							</view>
							<view class="width-full" v-if="Object.keys(activeData).length>0">
								<view class="wordsDefaultText fontSize-24 "
									:class="type==1?activeData[index]?'wordsText':'hiddenText':!activeData[index]&&defaultActive?'wordsText':'hiddenText'">
									<view class="marginBottom-5 u-line-1" v-for="(t,i) in returnVal(item.tran)"
										:key="i">
										{{t}}
									</view>
								</view>
								<!-- <view class="wordsDefaultText fontSize-24" :class="type==1?activeData[index]?'wordsText':'hiddenText':!activeData[index]&&defaultActive&&index<defaultActive?'wordsText':'hiddenText'" v-html="returnVal(item.tran)"></view> -->
								<!-- <span v-if="type==2&&!activeData[index]&&defaultActive&&index<defaultActive">{{item.aa}}</span> -->
							</view>
						</view>
						<view @click="activeWords(item,index)" v-else
							class="relative box_list  marginBottom-10 paddingBottom-10 paddingTop-10 box-sizing paddingLeft-30 paddingRight-30 borderRadius-10 width-full flex  space-between items-center"
							v-for="(item,index) in list" :key="index"
							:class="activeData[index]?type == 1?'boxBorder':'boxBorder1':type==1?'bgColor':'bgColor2'">

							<view class="width-full">
								<!-- !activeData[index]&&defaultActive&&index<defaultActive?'wordsText':'hiddenText' -->
								<view class="wordsDefaultText fontSize-24">
									<view class="marginBottom-5 u-line-1" v-for="(t,i) in returnVal(item.tran)"
										:key="i">
										{{t}}
									</view>
								</view>
								<!-- <view class="wordsDefaultText fontSize-24" :class="type==1?activeData[index]?'wordsText':'hiddenText':!activeData[index]&&defaultActive&&index<defaultActive?'wordsText':'hiddenText'" v-html="returnVal(item.tran)"></view> -->
								<!-- <span v-if="type==2&&!activeData[index]&&defaultActive&&index<defaultActive">{{item.aa}}</span> -->
							</view>
							<view class=" width-full flex column flex-center text-right"
								v-if="Object.keys(activeData).length>0">
								<view class="fontSize-30 weight-700"
									:class="type==1?activeData[index]?'wordsText':'hiddenText':!activeData[index]&&defaultActive?'wordsText':'hiddenText'">
									{{item.wordHead}}
								</view>
								<view class="fontSize-24"
									v-if="userInfo&&userInfo.memberset&&userInfo.memberset.yingbiao == 1">
									{{item.phone}}
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="width-full box-sizing btns flex column items-center flex-center">
					<view class="width-full flex flex-center fontSize-24">
						点击单词 标记你<span @click="typeChange(type == 1?2:1)"
							:class="type == 1?'red':'blue'">{{type == 1?'陌生':'熟悉'}}</span>的单词
					</view>
					<view v-if="is_lastdata==1" class="marginTop-20 flex flex-center">
						<view class="next_btn" @click="btnClick(1)">
							下一组
						</view>
					</view>
					<view v-if="is_lastdata==0&&list.length!=0" class="marginTop-20 flex flex-center">
						<view class="next_btn" @click="submit(2)">
							提交
						</view>
					</view>
					<view v-if="is_lastdata==0&&list.length==0" class="marginTop-20 flex flex-center">
						<view class="next_btn">
							没有单词了
						</view>
					</view>
				</view>
			</view>
		</page-container>
		<up-popup :show="editShow" mode='center' bgColor='transparent'>
			<view class="popup_bg">
				<view class="popup_title">
					温馨提示
				</view>
				<view class="popup_pro">
					本次刷词您共刷{{headInfo.finishWord-totalWord}}个单词，其中{{headInfo.unknowWord-tempWord}}生单词，{{headInfo.finishWord-totalWord-(headInfo.unknowWord-tempWord)}}个熟词。是否确认退出?
				</view>
				<view class="flex u-flex-between padding-30 marginTop-15">
					<view class="popup_cancel" @click="exit">
						退出
					</view>
					<view class="popup_sure" @click="sure">
						继续
					</view>
				</view>
			</view>
		</up-popup>
		<up-popup :show="setupShow" :round="25" closeable='true' @close='close'>
			<view class="setup_box">
				<view class="setup_title">{{headInfo.book_name}}</view>
				<view class="paddingTop-24 paddingBottom-24 paddingLeft-32 paddingRight-32">
					<view class="flex u-flex-between items-center border_bottom paddingBottom-22">
						<view class="flex_left">
							音标
						</view>

						<up-switch v-model="yingbiao" :activeValue='1' :inactiveValue='0'
							activeColor='#51D580'></up-switch>
					</view>
					<view class="flex u-flex-between items-center border_bottom paddingBottom-22 paddingTop-20">
						<view class="flex_left">
							词性词义
						</view>
						<up-switch v-model="cixing" :activeValue='1' :inactiveValue='0'
							activeColor='#51D580'></up-switch>
					</view>
					<view class="flex u-flex-between items-center border_bottom paddingBottom-22 paddingTop-20">
						<view class="flex_left">
							交互震动
						</view>
						<up-switch v-model="is_vibrate" :activeValue='1' :inactiveValue='0'
							activeColor='#51D580'></up-switch>
					</view>
					<view class="border_bottom paddingBottom-22 paddingTop-20">
						<view class="flex_left">
							播报次数
						</view>
						<view class="flex paddingTop-20">
							<view class="flex_right_btn" v-for="(i,v) in yuyinList" :key="v"
								:class="yuyin==i.value?'yuyinHover':''" @click="yuyinTab(i,v)">
								{{i.label}}
							</view>
						</view>
					</view>
					<view class="border_bottom paddingBottom-22 paddingTop-20 flex u-flex-between items-center">
						<view class="flex_left">
							发音类型
						</view>
						<view class="flex ">
							<view class="flex_right_btn" v-for="(i,v) in fayinList" :key="v"
								:class="pronun==i.value?'pronunHover':''" @click="pronunTab(i,v)">
								{{i.label}}
							</view>
						</view>
					</view>
					<view class="border_bottom paddingBottom-22 paddingTop-20 flex u-flex-between items-center">
						<view class="flex_left">
							刷词类型
						</view>
						<view class="flex ">
							<view class="flex_right_btn" v-for="(i,v) in levelList" :key="v"
								:class="level==i.value?'levelHover':''" @click="levelTab(i,v)">
								{{i.label}}
							</view>
						</view>
					</view>
					<view class="border_bottom paddingBottom-22 paddingTop-20 flex u-flex-between items-center">
						<view class="flex_left">
							刷词模式
						</view>
						<view class="flex ">
							<view class="flex_right_btn" v-for="(i,v) in studymoshiList" :key="v"
								:class="studymoshi==i.value?'studymoshiHover':''" @click="studymoshiTab(i,v)">
								{{i.label}}
							</view>
						</view>
					</view>
					<view class="marginTop-10 flex items-center  flex-center" @click="toggleCheckbox">
						<up-checkbox :customStyle="{marginBottom: '5px'}" label="" shape="circle" size="16px" usedAlone
							v-model:checked="firstBrushingWords" activeColor='#51D580'> </up-checkbox>
						<view class="fontSize-26 ">
							下次不再展示
						</view>
					</view>
					<view class="setup_btn" @click="setupSure">
						开始刷
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		nextTick,
		inject
	} from 'vue'
	import {
		onLoad,
		onUnload,
		onShow
	} from '@dcloudio/uni-app'
	const innerAudioContext = uni.createInnerAudioContext();
	const userInfo = ref({});
	const editShow = ref(false)
	const setupShow = ref(false)
	const isShowPage = ref(true)
	innerAudioContext.autoplay = false;
	const is_lastdata = ref(0)
	const tempWord = ref(0)
	const totalWord = ref(0)
	const firstBrushingWords = ref(true)
	const wordShow = ref(false)
	innerAudioContext.onCanplay(() => {
		// console.log('可以播放l ');
		// setTimeout(() => { 
		// console.log('开始播放');
		// innerAudioContext.play()
		// }, 1000)
	});
	innerAudioContext.onPlay((e) => {

		// console.log('音频播放事件', e);
	})
	innerAudioContext.onEnded((e) => {

		// _this.voiceLoading = false
		// console.log('音频自然播放结束事件', e);
	})
	const timer = ref({});

	const play = (i, time, word) => {
		if (true) {
			timer.value['t' + i] = setTimeout(() => {
				console.log(89)
				innerAudioContext.stop();
				innerAudioContext.src = `https://dict.youdao.com/dictvoice?audio=${word}&type=1`;
				innerAudioContext.play();
			}, time);
		}
	}
	const clear = () => {
		if (timer.value) {
			let arr = Object.keys(timer.value)
			for (let s of arr) {
				// console.log(timer.value[s])
				clearTimeout(timer.value[s]);
			}
		}

	}
	const playChain = (i, time, word) => {
		clear();
		play(i, time, word);
	}
	const insertWordInfoApi = inject('insertWordInfo')

	const headInfo = ref({
		book_id: '',
		page: 1,
		everyGroup: null,
		totalWord: null,
		finishWord: null,
		unknowWord: null,
		totalGroup: null,
		currentGroup: 1,
		book_name: '',
	})
	const is_vibrate = ref('0')
	const cixing = ref('0')
	const yingbiao = ref('0')
	const getUserInfoApi = inject('getUserInfo');
	const yuyinList = ref([{
			label: '不播报',
			value: 0
		},
		{
			label: '1次',
			value: 1
		},
		{
			label: '2次',
			value: 2
		},
		{
			label: '3次',
			value: 3
		},

	])
	const fayinList = ref([{
			label: '美音',
			value: 'usphone'
		},
		{
			label: '英音',
			value: 'ukphone'
		},
	])
	const levelList = ref([{
			label: '熟悉',
			value: 2
		},
		{
			label: '陌生',
			value: 1
		},

	])
	const studymoshiList = ref([

		{
			label: '英译中',
			value: 1
		},
		{
			label: '中译英',
			value: 2
		},

	])
	const isShow=ref(false)
	const level = ref(2)
	const yuyin = ref(0)
	const type = ref(0); //0为陌生词1为熟悉词
	const pronun = ref('usphone')
	const studymoshi = ref(1)
	const loginWordCode = () => {
		// let param = uni.getStorageSync('loginParam');
		getUserInfoApi().then(res => {
			// uni.setStorageSync('userInfo', res)
			userInfo.value = res
			is_vibrate.value = res.memberset.is_vibrate
			cixing.value = res.memberset.cixing
			yingbiao.value = res.memberset.yingbiao
			studymoshi.value = res.memberset.studymoshi
			type.value = res.memberset.level
			console.log(type.value)
			level.value = res.memberset.level
			pronun.value = res.memberset.pronun
			yuyin.value = res.memberset.yuyin

			if (studymoshi.value == 2) {
				isStatus.value = true
				console.log(isStatus.value, 149)
			} else if (studymoshi.value == 1) {
				isStatus.value = false
				console.log(isStatus.value, 151)
			}
		})
	};

	const defaultActive = ref(null);
	const replace = ref(false)
	const activeData = ref({});
	const list = ref([]);
	const loadShow = ref(true)
	const param = ref({
		wbook_id: '',
		times_id: '',
		knowword: [],
		unknowword: [],
		currentword: ''
	})
	const isStatus = ref(false)

	const getWordList = inject('getWordList');
	const getList = () => {
		getWordList({
			times_id: param.value.times_id,
			wbook_id: param.value.wbook_id,
			page: headInfo.value.page
		}).then(res => {
			console.log(res, 155)
			headInfo.value['book_id'] = res.book_id;
			headInfo.value['currentGroup'] = parseInt(res.currentGroup);
			headInfo.value['everyGroup'] = parseInt(res.everyGroup);
			headInfo.value['finishWord'] = parseInt(res.finishWord);
			headInfo.value['totalGroup'] = parseInt(res.totalGroup);
			headInfo.value['totalWord'] = parseInt(res.totalWord);
			headInfo.value['unknowWord'] = parseInt(res.unknowWord);
			// tempWord.value= parseInt(res.unknowWord)
			headInfo.value['book_name'] = res.book_name
			is_lastdata.value = res.is_lastdata
			res.wordList.forEach((item, index) => {
				item.checked = false
			})
			list.value = res.wordList || [];
			console.log(list.value, 180)
			uni.hideLoading()
			loadShow.value = false
		});
	};

	onLoad((op) => {
		wordShow.value = uni.getStorageSync('wordShow') || false
		if(wordShow.value==false){
			setupShow.value=true
		}else{
			setupShow.value=false
		}
		console.log(wordShow.value, 416)
		param.value.wbook_id = op.wbook_id
		param.value.times_id = op.times_id
		// getList();
		getWordList({
			times_id: param.value.times_id,
			wbook_id: param.value.wbook_id,
			page: headInfo.value.page
		}).then(res => {
			tempWord.value = parseInt(res.unknowWord)
			totalWord.value = parseInt(res.finishWord)
		});
	})
	const toggleCheckbox = () => {
		firstBrushingWords.value = !firstBrushingWords.value;

	};
	onShow(() => {
		loginWordCode();

		getList()
		if (!loadShow.value) {
			getList();
		}

	})
	onUnload(() => {
		// console.log('onHideonHideonHideonHide')
		clear();
	})
	const returnVal = (val) => {
		let valList = val.split('<br>');
		let text = ''
		for (let s of valList) {
			text = `
				${text}
				${s}
			`
		}
		return valList
	}

	const activeWords = (it, i) => {
		console.log(it, i, 187)
		if (is_vibrate.value == 1) {
			uni.vibrateLong({
				success: function() {
					console.log('success');
				}
			});
		}
		if (isStatus.value == true) {
			it.checked = !it.checked
		}
		clear();
		if (activeData.value[i]) {
			console.log('上一步')
			delete activeData.value[i]
			console.log(activeData.value[i], 203)
			let list1 = Object.keys(activeData.value)
			defaultActive.value = list1.length > 0 ? list1[list1.length - 1] : null
		} else {
			console.log('下一步')
			activeData.value[i] = it.wordId
			defaultActive.value = i
			console.log(userInfo.value, 'userInfo.valueuserInfo.valueuserInfo.value')
			if (userInfo.value.memberset.yuyin > 0) {
				clear();
				// 语音触发次数
				console.log('是否触发')
				for (var i = 0; i < userInfo.value.memberset.yuyin; i++) {
					play(i, i * 2000, it.wordHead)
				}
			}

		}

	}
	const typeChange = (t) => {
		type.value = t
		activeData.value = {}
	}
	const insertWordInfo = (t) => {
		let para = {
			wbook_id: param.value.wbook_id,
			times_id: param.value.times_id,
			knowword: param.value.knowword.join(),
			unknowword: param.value.unknowword.join(),
			currentword: param.value.currentword
		}
		uni.showLoading()
		setTimeout(() => {
			uni.hideLoading()
		}, 2000)
		insertWordInfoApi(para).then(res => {
			activeData.value = {}
			defaultActive.value = null
			if (t == 2) {
				uni.redirectTo({
					url: '/pages/index/studyReport'
				})
			} else {
				headInfo.value.page++
				getList()
			}

		})
	}
	const btnClick = (t) => {
		isShow.value=true
		let k = Object.keys(activeData.value)
		clear();
		console.log(k.length, 341)
		if (k.length > 0) {

			param.value.currentword = list.value[list.value.length - 1].wordRank;
			let knowWord = []
			for (var i = 0; i < list.value.length; i++) {
				if (!activeData.value[i]) {
					knowWord = [...knowWord, list.value[i].wordId]
				}
			}
			if (type.value == 1) {
				param.value.unknowword = Object.values(activeData.value);
				param.value.knowword = knowWord;

			} else {
				param.value.unknowword = knowWord;
				param.value.knowword = Object.values(activeData.value);
			}
			insertWordInfo(t)
		} else {
			// if(type.value == 1){
			// 	param.value.unknowword = knowWord;
			// 	param.value.knowword = Object.values(activeData.value);

			// }else{
			// 	param.value.unknowword = Object.values(activeData.value);
			// 	param.value.knowword = knowWord;
			// }
			uni.showModal({
				title: '确认提示',
				content: `是否将本组单词全部标记为${type.value == 2?'陌生词':'熟悉词'}并继续下一组？`,
				success: function(res) {
					if (res.confirm) {
						let unList = [];
						for (var i = 0; i < list.value.length; i++) {
							unList = [...unList, list.value[i].wordId]
							if (i == list.value.length - 1) {
								param.value.currentword = list.value[list.value.length - 1].wordRank;
							}
						}
						if (type.value == 1) {
							param.value.unknowword = [];
							param.value.knowword = unList;

						} else {
							param.value.unknowword = unList;
							param.value.knowword = [];
						}
						insertWordInfo(t)
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})

		}

		// setTimeout(()=>{
		// 	replace.value = false
		// },500)
	}

	const iconClick = () => {
		setupShow.value = true
		wordShow.value = true
		// uni.navigateTo({
		// 	url: '/pages/my/brushWordSetUp'
		// })
	}
	const submit = () => {
		clear();
		if (is_lastdata.value == 0) {
			btnClick(2)
		}
		// editShow.value = true
		// uni.navigateBack() 
	}

	const sure = () => {
		isShowPage.value = true
		editShow.value = false
	}
	const exit = () => {
		uni.redirectTo({
			url: '/pages/index/index'
		})
	}
	const close = () => {
		uni.setStorageSync('wordShow', firstBrushingWords.value)
		setupShow.value = false
	}
	const yuyinTab = (i, v) => {
		yuyin.value = i.value
	}
	const pronunTab = (i, v) => {
		pronun.value = i.value
	}
	const levelTab = (i, v) => {
		level.value = i.value
	}
	const studymoshiTab = (i, v) => {
		studymoshi.value = i.value
	}
	const updateWordSet = inject('updateWordSet');
	// 保存设置按钮
	const setupSure = () => {
		console.log(3333333333)
		uni.setStorageSync('wordShow', firstBrushingWords.value)
		updateWordSet({
			level_now: level.value,
			yingbiao: yingbiao.value,
			yuyin: yuyin.value,
			cixing: cixing.value,
			pronun: pronun.value,
			is_vibrate: is_vibrate.value,
			studymoshi: studymoshi.value,
		}).then(res => {
			console.log(res, 666666)
			setupShow.value = false
			loginWordCode();
			getList()
			if (!loadShow.value) {
				getList();
			}
		})

		// uni.navigateBack()
	}
	// 离开出现的弹窗
	const beforeleave = (e) => {
		if(isShow.value){
			isShowPage.value = false
			editShow.value = true
		}else{
			uni.navigateBack()
		}
	}
</script>
<style>
	page,
	body {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss">
	.red {
		color: #F33744;
	}

	.blue {
		color: #71da79;
	}

	.redBj {
		background-color: #ffbfbf;
	}

	.blueBj {
		background-color: #c1e5ff;
	}

	.btns {
		padding-bottom: calc(30rpx);
	}

	.wordsContent {
		z-index: 9;
	}

	.wordsDefaultText {
		scale: 1;
		z-index: -99999;
		display: flex;
		flex-direction: column;
	}

	@keyframes pulse {

		// from {
		//     opacity: 1.0;
		//   }
		0% {
			opacity: 0;
		}

		20% {
			opacity: 1.0;
		}

		40% {
			opacity: 0;
		}

		60% {
			opacity: 1.0;
		}

		80% {
			opacity: 0;
		}

		100% {
			opacity: 1.0;
		}

		// 70% {
		//   opacity: 0;
		// }
		// 80% {
		//   opacity: 1.0;
		// }
		// 90% {
		//   opacity: 0;
		// }
		// to {}
	}

	.boxBorder {
		transition: all .3s;

		&::before {
			content: "";
			position: absolute;
			inset: 0;
			// top: -10px;
			// left: -10px;
			// right: -10px;
			// bottom: -10px;
			border: 2px solid #ffbfbf;
			border-radius: 10px;
			animation: div5Ani 1s linear;
		}

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			// top: -10px;
			// left: -10px;
			// right: -10px;
			// bottom: -10px;
			border: 2px solid #ffbfbf;
			border-radius: 10px;
			animation: div5Ani 1s linear;
		}

		&::after {
			animation: div5Ani 1s -0.5s linear;
		}

	}

	.boxBorder1 {
		transition: all .3s;

		&::before {
			content: "";
			position: absolute;
			inset: 0;
			// top: -0px;
			// left: -0px;
			// right: -10px;
			// bottom: -10px;
			border: 2px solid #05b602;
			border-radius: 10px;
			animation: div5Ani 1s linear;
		}

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			// top: -10px;
			// left: -10px;
			// right: -10px;
			// bottom: -10px;
			border: 2px solid #05b602;
			border-radius: 10px;
			animation: div5Ani 1s linear;
		}

		&::after {
			animation: div5Ani 1s -0.5s linear;
		}

	}

	@keyframes div5Ani {

		0%,
		100% {
			clip-path: inset(0 0 98% 0);
		}

		25% {
			clip-path: inset(0 98% 0 0);
		}

		50% {
			clip-path: inset(98% 0 0 0);
		}

		75% {
			clip-path: inset(0 0 0 98%);
		}
	}

	.wordsText {
		display: inline-block;
		z-index: 9;
		animation: pulse 2s linear;
	}

	.hiddenText {
		display: none;
		scale: 1;
	}

	.box {
		width: 686rpx;
		min-height: 1174rpx;
		background: rgba(255, 255, 255, 0.6);
		margin: 40rpx auto;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #FFFFFF;

		.absolute {
			right: 0;
		}

		.word_img {
			width: 168rpx;
			height: 146rpx;
		}

		.box_list {
			width: 638rpx;
			min-height: 128rpx;
			background: #F2F2F2;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			margin: 0 auto 24rpx;
		}

		.bgColor {
			background-color: #E0FCEA;
		}

		.bgColor2 {
			background-color: #FFEDEA;
		}

		.boxBorder {
			background-color: #FFEDEA;
		}

		.boxBorder1 {
			background-color: #E0FCEA;
		}
	}

	.next_btn {
		width: 686rpx;
		height: 108rpx;
		background: #4AD27A;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin: 20rpx auto;
		text-align: center;
		line-height: 108rpx;
		font-weight: 500;
		font-size: 40rpx;
		color: #FFFFFF;
		position: fixed;
		bottom: 30rpx;
		left: 32rpx;
	}

	.popup_bg {
		width: 610rpx;
		height: 500rpx;
		background: url('https://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/remind.png') no-repeat;
		background-size: 100% 100%;

		.popup_title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 52rpx;
			color: #FFFFFF;
			text-align: center;
			padding-top: 20rpx;
		}

		.popup_pro {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			line-height: 42rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			width: 440rpx;
			height: 100rpx;
			margin: 120rpx auto 0;
		}

		.popup_cancel {
			width: 252rpx;
			height: 92rpx;
			background: #CCCCCC;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			text-align: center;
			line-height: 92rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.popup_sure {
			width: 252rpx;
			height: 92rpx;
			background: #51D580;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}


	}

	.setup_box {
		width: 750rpx;
		// height: 1320rpx;
		padding: 30rpx 0;

		.setup_title {
			padding: 40rpx 0;
			width: 750rpx;
			text-align: center;
		}

		.border_bottom {
			border-bottom: 2rpx solid #EBEBEB;
		}

		.flex_left {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
		}

		.flex_right_btn {
			width: 156rpx;
			height: 80rpx;
			background: #EBEBEB;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			text-align: center;
			line-height: 80rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			margin-right: 20rpx;
		}

		.yuyinHover,
		.pronunHover,
		.levelHover,
		.studymoshiHover {
			background: #51D580;
			color: #FFFFFF;
		}

		.setup_btn {
			width: 702rpx;
			height: 104rpx;
			background: #51D580;
			border-radius: 92rpx 92rpx 92rpx 92rpx;
			text-align: center;
			line-height: 104rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: 40rpx auto 0;
		}
	}
</style>